<template>
  <div>
    <dl v-for="item in list" :key="item.id" @click="toDetail(item.id)">
      <dt>
        <img :src="item.url" alt="" />
      </dt>
      <dd>
        <h2>{{ item.title }}</h2>
        <p>{{ item.desc }}</p>
      </dd>
    </dl>
  </div>
</template>

<script>

export default {
  name: 'List',
  props: {
    list: Array
  },
  methods: {
     toDetail(id) {
      this.$router.push(`/detail/${id}`)
    }
  }
}
</script>

<style scoped>
dl {
  display: flex;
}
</style>